import React, { Component } from "react";
//ref 的回调函数形式
export default class RefCom extends Component {
  //1. 声明一个实例的属性
  input = React.createRef();
  div = React.createRef();
  //声明单击事件的回调
  show = () => {
    // 3. 获取真实 DOM
    let input = this.input.current;
    let v = input.value;
    //设置文本
    this.div.current.innerHTML = v;
  }

  render() {
    return (
      <div>
        {/* 2. 在虚拟 DOM 对象身上添加 ref 属性 */}
        <input type="text" ref={this.input} />
        <button onClick={this.show}>发送</button>
        <hr />
        <div
          style={{ width: 400, height: 300, border: "solid 1px #234" }}
          ref={this.div}
        ></div>
      </div>
    );
  }
}
